<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银行代发及两项保险缴纳表</title>

    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!--引入本地 element-ui 的样式，-->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


    <style>
        table tr td
        {border:1px solid black;}

        body{
            font-weight: normal;
        }

        .fontclass{
            font-size: 10px;
        }

        .table_border tr td{
            border:none;
        }
    </style>

</head>
<body>

    <div id="app">
        <template>
            <div>
                <!-- 查询表单 -->
                <el-form
                        :inline="true"
                        size="small"
                        class="demo-form-inline"
                >
                    <el-form-item label="所属期" >
                        <el-date-picker
                                type="month"
                                placeholder="选择年月"
                                v-model="formData.month"
                                style="width: 100%"
                                value-format="yyyyMM"
                        ></el-date-picker>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="getData" >查询</el-button>
                        <el-button type="primary" @click="shenhejiesuanAdd" >生成数据</el-button>
                        <el-button type="primary" plain @click="printHtml">报表打印</el-button>
                    </el-form-item>
                </el-form>


                <div id="printMe" style="padding: 2px 80px;">
                    <!-- table模块 -->
                    <table
                            border="1"
                            cellpadding="8"
                            style="border-collapse: collapse; width: 100%; font-size: 14px"
                    >
                        <caption>
                            <p style="font-size: 20px;font-weight: bold;"  contenteditable="true"  >再就业劳务费银行代发及两项保险缴纳表</p>
                            <p style="text-align: center">
                                <table class="table_border" border="0" width="100%">
                                    <tr class="fontclass">
                                        <td style="width: 40%;">填报单位(公章)：</td>
                                        <td>所属期：{{form.ssq_str}}</td>
                                        <td style="text-align: right;">单位：人、元</td>

                                    </tr>
                                </table>
                            </p>
                        </caption>
                        <tr class="fontclass"  style="height: 50px;"  >
                            <td align="center"  >单位及项目</td>
                            <td align="center"  >人数(人)</td>
                            <td align="center"  >金额(元)</td>
                            <td align="center"  >备注</td>
                        </tr>

                        <tr class="fontclass" >
                            <td align="center" style="height: 50px;"  >玉门市工商银行</td>
                            <td align="center"  >{{NumberQfw(form.lwfrs)}}</td>
                            <td align="center"  >{{NumberQfw(form.lwfje)}}</td>
                            <td align="center"  ></td>
                        </tr>
                        <tr class="fontclass" >
                            <td align="center" style="height: 50px;"  >养老保险金</td>
                            <td align="center"  >{{NumberQfw(form.ylbxjcbrrs)}}</td>
                            <td align="center"  >{{NumberQfw(form.yllbxjje)}}</td>
                            <td align="center"  ></td>
                        </tr>
                        <tr class="fontclass" >
                            <td align="center" style="height: 50px;"  >医疗保险金</td>
                            <td align="center"  >{{NumberQfw(form.ylbxjcbrs)}}</td>
                            <td align="center"  >{{NumberQfw(form.ylbxjxj)}}</td>
                            <td align="center"  ></td>
                        </tr>


                    </table>

                    <div class="fontclass"
                         style="display: flex; justify-content: space-around; margin-top: 30px"
                    >
                        <div>共享中心负责人：</div>
                        <div>稽核：</div>
                        <div>部门负责人：</div>
                        <div>制表：</div>
                    </div>
                </div>
            </div>
        </template>


        <el-dialog
                title="请选择所属期"
                :visible.sync="dialogVisible"
                width="30%">
            <span>
                <el-form ref="form"  label-width="120px" size="mini" >

                    <el-form-item label="年度">
                        <el-select v-model="form.nd" placeholder="请选择年度">
                            <el-option v-for="(item,index) in nd"  :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="月份">
                        <el-select v-model="form.yf" placeholder="请选择月份">
                            <el-option v-for="(item,index) in yf"  :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createshenhejiesuan('0')">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>


        var vm = new Vue({
           el:"#app",
           data:{
               formData : {month:""},
               form:{},
               parmsData:{},
               dialogVisible: false,
               nd:[],
               yf:["01","02","03","04","05","06","07","08","09","10","11","12"],
           },
           created(){
               let d1 = renderTime(new Date(),"yyyy-MM-dd");
               let d2 = d1.split("-");
               this.formData.month = d2[0]+""+d2[1];
               this.parmsData = getParams();
               this.getData();
           },
            methods: {
                ndcreate(){
                    for(let a=1993;a<=2030;a++){
                        this.nd.push(""+a);
                    }
                    let d1 = renderTime(new Date(),"yyyy-MM-dd");
                    let d2 = d1.split("-");
                    this.form["nd"] = d2[0];
                    this.form["yf"] = d2[1];
                },
                shenhejiesuanAdd(){
                    this.ndcreate();
                    this.dialogVisible = true;
                },
                async savejiesuanbiao(data){
                    let i = top.load();
                    const res = await postWebCustom(getTableId("2332"),{jsondata:JSON.stringify(data)});
                    top.close(i);
                    top.alert(res.msg);
                },
                async baobiaoprint(layero){
                    let btn = {
                        btn: ['打印预览', '取消']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            let win = getTopIframe(layero);
                            win.vm.printHtml();
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };

                    //按钮【按钮一】的回调
                    let win = getTopIframe(layero);
                    let data = win.getData();
                    await vm.savejiesuanbiao(data);

                    top.f_layer_open_get("/admin/html/module/yumenyoutian/youchangjiechu/print1.html?id="+this.form.nd+""+this.form.yf, "80%", "80%", function () {

                    }, btn, "报表打印");
                },
                //生成审核结算表
                async createshenhejiesuan(sfzxtj){
                    this.dialogVisible = false;
                    load();
                    const res = await postWebCustom(getTableId("2331"),{ssq:this.form.nd+""+this.form.yf,sfzxtj:sfzxtj});
                    layer.closeAll();
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    let btn = {
                        btn: ['重新统计','报表打印','保存', '取消']
                        , yes: function (index, layero) {
                            top.close();
                            vm.createshenhejiesuan("1");

                        }
                        , btn2: function (index, layero) {
                            vm.baobiaoprint(layero);
                            return false;// 开启该代码可禁止点击该按钮关闭
                        },btn3:function (index, layero) {
                            //按钮【按钮一】的回调
                            let win = getTopIframe(layero);
                            let data = win.getData();
                            vm.savejiesuanbiao(data);
                            return false; //开启该代码可禁止点击该按钮关闭
                        },btn4: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    };

                    top.f_layer_open_get("/admin/html/inputCustom/index.html?tableId="+getTableId("2330"), "90%", "85%", function () {
                    }, btn, "劳务费审批结算表",res.data);
                },
               NumberQfw(str){
                   if(str == ""){
                       return "/";
                   }
                   if(Number(str) == 0){
                       return "/";
                   }
                   if(str!="" && "/" != str){
                       return Number(str).toLocaleString();
                   }
                   return str;
               },
                printHtml(){
                    $("#printMe").print();
                },
                //   获取表格数据
                async getData() {
                    load();
                    const res = await postWebCustom(getTableId("2333"),{ssq:this.formData.month});
                    layer.closeAll();
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    this.form = res.data;
                },

            },
        });
    </script>
</body>
</html>